<!DOCTYPE html>
<html>
<head>
    <title>{$site_name}</title>
    <meta name="keywords" content="{$site_seo_keywords}"/>
    <meta name="description" content="{$site_seo_description}">
    <meta name="author" content="日新网">
    <tc_include file="Public:head"/>
    <link rel="stylesheet" type="text/css" href="/public/clickphoto/clickphoto.css">
    <script src="/public/clickphoto/jquery.min.js"></script>
    <script src="/public/clickphoto/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
    <script src="/public/clickphoto/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
    <script src="/public/clickphoto/hammer.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/public/clickphoto/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>

    <style>
        #city {
            width: 180px;
        }

        #province {
            width: 180px;
        }

        .control-label {
            font-weight: bold;
            float: left;
            width: 70px;
        }

        #areaInfo {
            display: inline-block;
            padding-top: 10px;
        }

        .tab-content {
            overflow: visible;
        }

        .uploaded_avatar_area {
            margin-top: 20px;
        }

        .uploaded_avatar_btns {
            margin-top: 20px;
        }

        .uploaded_avatar_btns .btn1 {
            background-color: #FFF;
            color: #000232;
            border: 1px solid #000232;
            border-radius: 10px;

            margin-top: 20px;
        }

        .uploaded_avatar_area .uploaded_avatar_btns {
            display: none;
        }

        .file {
            position: relative;
            display: inline-block;
            /*background: #D0EEFF;*/
            /*border: 1px solid #99D3F5;*/
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            /*color: #1E88C7;*/
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

        .file input {
            position: absolute;
            font-size: 14px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .hover_head:hover {
            opacity: 1;
        }

        .file:hover {
            /*background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;*/
            text-decoration: none;
        }

        /*个人中心修改页*/
        .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }

        .tab-content {
            width: 200px;
            height: 238px;
        }
        .xg_form {
            font-size: 16px;
            color: #323232;
            margin-right: 30px;
            line-height: 28px;
            vertical-align: middle;
        }
        .xg_form_item .closs_icon {
            display: inline-block;
            width:24px;
            height: 20px;
            background:url("/public/images/img/close.png") top center no-repeat;
            -webkit-background-size: 24px 24px;
            background-size: 24px 24px;
            cursor: pointer;
            position: relative;
            top: 8px;
            left: -24px;
            display: none;
        }
        .xg_form_item:hover .closs_icon {
            display:inline-block;
        }
        .xg_form .Birthday {
            margin-top: 20px;
        }
        .xg_form input {
            height: 28px;
        }
        .xg_form select {
            height: 28px;
        }
        .xg_form .name input {
            width: 156px;
            padding-right: 24px!important;
        }
        .xg_form .Birthday input {
            width: 266px;
            padding-right: 24px!important;
        }
        .xg_form .marry {
            margin-right: 90px;
        }
        .xg_form .marry input {
            width: 15px;
            height: 15px;
            margin-top: 0px;
        }
        .xg_form .work {
            margin: 15px 0;
        }
        .xg_form .work input {
            width: 178px;

        }
        .xg_form .company {
            margin-bottom: 15px;
            margin-top: 20px;
        }
        .xg_form .company input {
            width: 476px;
            padding-right: 24px!important;
        }
        .xg_form .introduce {
            margin-top: 20px;
        }
        .xg_form .introduce span {

            font-size: 16px;
        }
        .introduce textarea {
            width: 676px;
            line-height: 24px;
            resize: none;
            padding-right: 30px!important;
        }
        .layui-layer-btn.layui-layer-btn0 a, .layui-layer-btn .layui-layer-btn1 a {
            width: 60px;
            height: 30px;
            border-radius: 5px;
        }
        .layui-layer-btn.layui-layer-btn0 a {
            width: 60px;
            height: 30px;
            border-radius: 5px;
            background-color: #000035;
        }
        #edit_post input, #edit_post textarea, #edit_post select {
            font-size: 15px;
            padding: 0px 5px;
        }
        #edit_post {
            margin-top: 30px;
        }
        #edit_post span {
            display: inline-block;
            width: 128px;
            font-size: 12px;
            color: #707070;
            text-align: right;

        }
        #edit_post input ,#edit_post select , #edit_post textarea {
            border: none;
            border-bottom: 1px solid #c5c5c5;
            font-size: 16px;
        }
        .layui-layer-btn .layui-layer-btn0, .layui-layer-btn .layui-layer-btn1 {
            width: 60px;
            height: 30px;
            background-color: #000232;
            border-radius: 10px;
            font-size: 18px;
            color: #ffffff;
            text-align: center;
            line-height: 30px;
            display: inline-block;
        }
        .headpic {
            cursor: pointer;
            width: 100%;
            overflow: hidden;
            position: relative;
            top: -122px;
            left: -38px;
            margin: 0 auto;
            text-align: center;
            text-indent: 0px;
            height: 40px;
            font-size: 17px;
            line-height: 20px;
            margin-left: 39px;
            opacity: 0.23;
            filter: alpha(opacity=23);
            color: #fff;
            background-color: #000;
            padding: 4px 0;
        }
        .headpic .more {
            font-size: 12px;
        }
        .span9 {
            margin-left: 0px;
            height: 870px;
        }
        .xg_form span {
            padding-right: 5px;
        }
        .relative2 {
            position: relative;
            top: 2px;
        }
        .relative_3{
            position: relative;
            top: -3px;
        }
        .sbm_ground {
            width: 186px;
            margin-left: 30%;
            margin-top: 36px;
        }
        .sbm_ground input {
            width: 60px;
            height: 30px;
            background-color: #000232;
            font-size: 20px;
            border-radius: 10px;
            margin: 0 15px;
            border: none;
            color: #fff;
        }
        .sbm_ground .sbm2 {
            background-color: #FFF;
            color: #000232;
            border: 1px solid #000232!important;
        }
        .tab-content #one { /*width: 185px;height: 185px;*/
        }
        .list-group {
            width: 210px;
            margin-left: -30px;
        }
        /*个人的中心布局样式调整*/
        .container {
            width: 1190px;
        }
        .container .title{
            font-size: 16px;
            color: #000232;
            line-height: 48px;
            height: 40px;
            padding-left: 60px;
            border-bottom: 1px solid #c5c5c5;
            margin-bottom: 18px;
        }
        .row {
            margin-left: 0px;

        }
        .span3 {
            margin-left: 0;
            width: 280px;
        }
        .span9 {
            width: 830px;
            margin-left: 80px;
        }
        /*修改头像样式修改*/
        .xg_picture_title {
            display: inline-block;
            width: 128px;
            text-align: right;
            font-size: 12px;
            letter-spacing: 2px;
        }
        .xg_picture .explain{
           font-size: 12px;
            letter-spacing: 1px;
            position: relative;
            top:-70px;
            left: 2px;
        }
        .xg_picture .tabs {
            display: inline-block;
            width: 150px;
            height: 150px;
            background-color: #f9f9f9;
            margin: 0 auto;
        }
        .xg_picture .tabs .tab-content{
            width: 100%;
            padding-top: 10px;
        }
        .xg_picture .tabs .clipContent{
            margin-left: 5px;
            /*background-color: #f5f5f5;*/
        }
        .xg_picture #view {
            width: 120px;
            height: 120px;
            margin: 0 auto;
        }
    </style>
</head>
<body class="body-white" id="top">
<tc_include file="Public:nav"/>

<div class="container tc-main">
    <div class="row">
        <div class="span3">
            <tc_include file="Public:usernav"/>
        </div>
        <div class="span9" style="overflow: hidden;margin-top: 10px;">
            <div class="tabs base_info">
                <div style="margin:0 auto;">
                    <div class="container clearfix" style="margin: 0 auto">
                        <p class="title">基本信息</p>
                        <div class="xg_picture">
                            <span class="xg_picture_title">修改头像:</span>
                            <div class="tabs">
                                <div class="tab-content clearfix">
                                    <div class="clipRow2" style="" ontouchstart="">
                                        <div class="cover-wrap">
                                            <div class="clipBgn">
                                                <div id="clipArea">
                                                    <div class="photo-clip-view">
                                                        <div class="photo-clip-moveLayer">
                                                            <div class="photo-clip-rotateLayer">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="photo-clip-mask">
                                                        <div class="photo-clip-mask-left"></div>
                                                        <div class="photo-clip-mask-right"></div>
                                                        <div class="photo-clip-mask-top"></div>
                                                        <div class="photo-clip-mask-bottom"></div>
                                                        <div class="photo-clip-area"></div>
                                                    </div>
                                                </div>
                                                <div class="clipButton" style="position: relative;">
                                                    <button id="clipBtn">保存图片</button>
                                                    <span class="tips" style="position: absolute;top:-120px;left: 380px;color:#fff;display: inline;">滚动滑轮控制图片大小</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="view"></div>
                                        <div class="clipContent" style="">上传图片<input type="file" id="file" accept="image/*">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <span class="explain">(图片大小不要超过1M)</span>
                        </div>
                        <form id="edit_post" method="post" action="{:u('user/profile/edit_post')}">
                            <input value="{$id}" hidden>
                            <div class="xg_form">
                                <div class="name xg_form_item">
                                    <span class="relative2">姓 名:</span>
                                    <input id="user_nicename" name="user_nicename" value="{$user_nicename}">
                                    <i class="closs_icon"></i>
                                </div>
                                <div class="Birthday xg_form_item">
                                    <span class="relative2">职 位:</span>
                                    <input name="position" value="{$position}">
                                    <i class="closs_icon"></i>
                                </div>
                                <div class="company xg_form_item">
                                    <span class="relative2" >公 司:</span>
                                    <input name="company" value="{$company}">
                                    <i class="closs_icon"></i>
                                </div>
                                <div class="work xg_form_item">
                                    <span class="relative_3">生 日:</span>
                                    <input id="birthday" name="birthday" value="{$birthday}" type="date">
                                </div>
                                <div class="marry xg_form_item">
                                    <span>婚 否:</span>
                                    <input type="radio" name="marry" value="0" {$marry== 0 ? 'checked' : ''}> 未 婚
                                    <input type="radio" name="marry" value="1" {$marry== 1 ? 'checked' : ''}> 已 婚
                                </div>
                                <div class="city xg_form_item">
                                    <span class="relative_3">常 驻 城 市:</span>
                                    <div id="areaInfo">
                                        <input name="city_id" hidden>
                                    </div>
                                </div>
                                <div class="introduce xg_form_item" style="margin-top: 20px;position: relative;">
                                    <span class="relative_3">简 单 介 绍:</span>
                                    <textarea id="signature" name="signature" class="bianji-textarea-l">{$signature}</textarea>
                                    <i class="closs_icon" style="position:absolute;top: 2px;left: 810px;"></i>
                                </div>
                            </div>
                            <div class="sbm_ground">
                                <input class="sbm1" type="submit" value="完成">
                                <input class="sbm2" type="button" onclick="javascript:window.history.go(-1)" value="取消">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /container -->
<tc_include file="Public:footer"/>
<tc_include file="Public:scripts"/>

<script src="__TMPL__Public/assets/js/jquery.infiniteScroll.js"></script>
<script src="__PUBLIC__/js/layer/layer_1.js"></script>
<script src="__PUBLIC__/js/area.js"></script>
<script>
    var area = {$area};
    area = eval(area);

    var areaPath = {$path ? $path : []};
    areaPath = eval(areaPath);

    $(function () {
        // 地址选择select的初始化
        initArea(2);

        // 原头像加载
        var old_avatar = "{:sp_get_user_avatar_url($avatar)}?t={:time()}";
        if (old_avatar) {
            $('#view').css('background-image', 'url(' + old_avatar + ')');
        }


        // 表单验证
        Wind.use('validate', 'ajaxForm', function () {
            var form = $('#edit_post');
            //表单验证开始
            form.validate({
                //是否在获取焦点时验证
                onfocusout: false,
                //是否在敲击键盘时验证
                onkeyup: false,
                //当鼠标掉级时验证
                onclick: false,
                // 错误展示
                showErrors: function (errorMap, errorArr) {
                    //errorMap {'name':'错误信息'}
                    //errorArr [{'message':'错误信息',element:({})}]
                    $(errorArr[0].element).focus();
                    layer.msg(errorArr[0].message);
                },
                //验证规则
                rules: {
                    'user_nicename': {
                        required: 1
                    },
                    'city_id': {
                        required: 1
                    },
                    'position': {
                        required: 1
                    },
                    'company': {
                        required: 1
                    },
                    'signature': {
                        required: 1
                    }
                },
                //验证未通过提示消息
                messages: {
                    'user_nicename': {
                        required: '请输入昵称'
                    },
                    'city_id': {
                        required: '请选择城市'
                    },
                    'position': {
                        required: '请填写职位'
                    },
                    'company': {
                        required: '请填写公司'
                    },
                    'signature': {
                        required: '请填写一句话简介'
                    }
                },
                //验证通过，提交表单
                submitHandler: function (forms) {
                    $('#submitCheck').val(1);
                    $(forms).ajaxSubmit({
                        url: form.attr('action'), //按钮上是否自定义提交地址(多按钮情况)
                        dataType: 'json',
                    });
                }
            });
        });
    })


    function update_avatar() {
        var area = $(".uploaded_avatar_area img").data("area");
        $.post("{:U('profile/avatar_update')}", area, function (data) {
            if (data.status == 1) {
                var new_avatar_path = eval(data.info);
                $('.headicon').attr('src', "{:sp_get_user_avatar_url('" + new_avatar_path + "')}");
                $('.uploaded_avatar_area .jcrop-holder').remove();
                $(".uploaded_avatar_btns").hide();
            }
        }, "json");
    }

    function avatar_upload() {
        Wind.css("jcrop");
        Wind.use("ajaxfileupload", "jcrop", "noty", function () {
            $.ajaxFileUpload({
                url: "{:U('profile/avatar_upload')}",
                fileElementId: "avatar_uploder",
                dataType: 'json',
                data: {},
                success: function (data, status) {
                    if (data.status == 1) {
                        var $uploaded_area = $(".uploaded_avatar_area");
                        $uploaded_area.find("img").remove();
                        var src = "__UPLOAD__avatar/" + data.data.file;
                        var $img = $("<img style='max-width: 600px; max-height: 600px;'/>").attr("src", src);
                        $img.prependTo($uploaded_area);
                        $(".uploaded_avatar_btns").show();
                        var img = new Image();
                        img.src = src;

                        var callback = function () {
                            $img.Jcrop({
                                aspectRatio: 1,
                                trueSize: [img.width, img.height],
                                setSelect: [0, 0, 100, 100],
                                onSelect: function (c) {
                                    $img.data("area", c);
                                }
                            });
                        }

                        if (img.complete) {
                            callback();
                        } else {
                            img.onload = callback;
                        }

                    } else {
                        noty({
                            text: data.info,
                            type: 'error',
                            layout: 'center'
                        });
                    }
                },
                error: function (data, status, e) {
                }
            });
        });
        return false;
    }
</script>
<script type="text/javascript">
    //上传封面
    var clipArea = new bjj.PhotoClip("#clipArea", {
        size: [300, 300],// 截取框的宽和高组成的数组。默认值为[260,260]
        outputSize: [0, 0], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
        //outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
        file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
        view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
        ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
        loadStart: function (fileObj) {
            // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
            $('.cover-wrap').fadeIn();
            console.log("照片读取中");
        },
        loadComplete: function () {
            // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
            console.log("照片读取完成");
        },
        //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
        clipFinish: function (dataURL) {
            // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
            $('.cover-wrap').fadeOut();
            $('#view').css('background-size', '100% 100%');
            // console.log(dataURL); //输出图像base64

            $.post("{:U('User/Profile/save_user_avatar')}", {data_url : dataURL}, function (re) {
                if (re.status) {
                    $('.headicon').attr('src', re.data);
                } else {
                    layer.msg(re.info);
                }
            })
        }
    });
</script>
<script>
    // textarea高度自适应
    $(".bianji-textarea-l").height($(".bianji-textarea-l")[0].scrollHeight);
    $(".bianji-textarea-l").on("scroll", function(){
        $(this).height(this.scrollHeight);
    })
</script>
<script>
    $(function () {
        $(".xg_form_item .closs_icon").each(function (index,value) {
           $(value).click(function () {
               $(this).siblings("input,textarea").val(' ').focus();
           })
        })
    })

</script>
<!--slide侧边栏动画-->
<script>
    $(function () {
        setTimeout(anim,500);
        function anim(){
            $(".animate_data").find(".menu_main").animate({
                marginLeft:'-90px'
            },300);
            $(".animate_data").find(".menu_list").animate({
                height:"36px",
                paddingTop:'12px'
            },300);
            $(".animate_data").find(".tab_basics").addClass("active");
        }
    })
</script>
</body>
</html>